后续重点内容介绍与项目准备
本节是第33周的总览，梳理了从云开发过渡到 uni-app 前端页面开发的完整路线图，涵盖 CSS 框架集成、uni-cloud 深度使用、内容管理、安全通信、音视频组件以及支付专题等核心模块。同时介绍了知识付费小程序的设计稿、资源文件获取方式。
学习路线总览
整个后续学习内容按层级递进，可以划分为以下几个阶段：
uni-app 项目初始化
├── CSS 框架集成（uni-css / TailwindCSS / UnoCSS）
├── uni-cloud 云开发深入
│ ├── schema2code 代码生成
│ ├── uni-CMS 内容管理
│ ├── clientDB 查询
│ └── 云函数/云对象 URL 化
├── 前端页面开发（对接 NestJS 后台）
│ ├── 基础 UI 组件封装
│ ├── 页面间通信与跳转
│ └── 安全通信机制
├── 扩展功能
│ ├── 音视频组件
│ ├── 订阅消息
│ └── AI 绘画
└── 支付专题
├── 支付流程与通信原理
├── uni-pay
└── 自定义支付逻辑
text
CSS 框架集成
uni-app 项目中集成 CSS 框架是提升页面开发效率的关键。常见的方案包括：
| 框架 | 特点 | 集成方式 |
|---|---|---|
| uni-css | uni-app 内置样式方案 | 开箱即用 |
| TailwindCSS | 原子化 CSS，通过 class 编写样式 | 需 CLI 编译 |
| UnoCSS | 即时按需生成的原子化 CSS | 支持 CLI 和插件模式 |
在小程序环境中集成 TailwindCSS/UnoCSS 需要特殊处理，因为小程序不支持 * 选择器和部分 CSS 特性，需要通过 CLI 方式编译输出到 static 目录。
uni-cloud 云开发深入
schema2code：从数据表到管理页面
uni-cloud 提供的 schema2code 功能，可以基于 OpenDB Schema 自动生成 admin 管理页面（增删改查），大幅减少后台管理开发工作量。
uni-CMS 内容管理系统
uni-CMS 是官方提供的内容管理模块，集成了以下功能：
- 完整的文章编辑（富文本编辑器）
- 前端渲染
- 付费内容管理
- 广告解锁
- AI 文章生成（需开通 uni-ai）
- 媒体库管理
clientDB 查询
如果只想使用云数据库而不依赖 uni 生态的组件，需要深入了解 clientDB 的查询语法，包括 where、orderBy、field、foreignKey 联合查询等。
云函数/云对象 URL 化
云函数和云对象支持 URL 化，可以将 uni-cloud 的接口暴露为标准 HTTP 接口，与自有的 NestJS 后台进行安全通信。这部分涉及：
- 接口安全（签名验证、token 管理）
- 小程序与服务器之间的通信安全
- 数据加密传输
uni-cloud 生态产品
uni-starter 与 uni-id
uni-starter 是官方的模板项目，集成了 uni-id 通用模块，负责：
- 登录认证
- 角色权限管理
- Token 刷新与存储
uni-id 分为 uni-id-pages（页面部分）和 uni-id-common（通用逻辑部分）。
uni-admin
uni-admin 是后台管理系统模板，可以集成 uni-CMS、媒体库等模块，提供完整的内容管理后台。
uni-app x
uni-app x 是下一代跨平台应用开发引擎，使用 UTS 语言和 UVU 渲染引擎，对标 Flutter。特点包括：
- 支持安卓、iOS、Web 开发
- 支持小程序和鸿蒙（Flutter 不支持）
- 不包含桌面端（Flutter 支持）
- 使用条件编译、缓存优化等性能优化
知识付费小程序设计说明
页面设计概览
小程序端主要将 Web 端的内容做移动端适配，展示分类数据和 UI 效果。核心页面包括：
| 页面 | 说明 |
|---|---|
| 首页 | 搜索、轮播、宫格导航、推荐列表 |
| 精品微课 | 课程卡片列表，支持视频/图文类型 |
| 学习计划 | 四宫格展示，支持定制计划 |
| 订阅专栏 | 图文列表，与精品微课类似 |
| 学习小组 | 社交功能，加入小组 |
| 每日一刻 | 文章列表（uni-cms-article） |
| 课程详情 | 音视频播放、目录、评论 |
前端开发重点
学习重点不是还原设计稿的每个像素，而是掌握以下能力：
- 基础组件设计：如何将页面拆分为可复用的组件
- 页面间通信：小程序与纯 View 类型应用的差异
- 组件封装：好的基础组件设计可以加速业务组件开发
资源获取方式
设计稿和静态资源的获取途径：
| 资源类型 | 获取方式 |
|---|---|
| PSD 设计稿 | 课程资料文件夹下载 |
| 切图与标注 | 蓝湖上传 PSD，在线查看标注 |
| 静态资源（图标、图片） | Git 仓库中查看老师使用的资源 |
| 课程资料 | 慕课网资料区下载 |
| 问题求助 | 课程 Q 群（问答区右侧加入） |
云数据库注意事项
uni-cloud 免费版提供 400 个集合数量，对于大多数项目完全够用。使用过程中需要注意：
- 多个项目共用同一云空间时可能出现 schema 冲突
- 保持良好的 Git 习惯，方便回滚
- 开发新模块前先下载远端 schema 做一次合并操作
↑